<template>
  <div class="menu-top">
    <!-- 面包屑 -->
     <div>
       <el-breadcrumb
      style="
        cursor: pointer;
        margin: 10px 0;
        display: inline-block;
        margin-left: 10px;
      "
    >
      <el-breadcrumb-item
        :to="item.path"
        v-for="item in pathList"
        :key="item.id"
        >{{ item.meta.title }}</el-breadcrumb-item
      >
    </el-breadcrumb>
     </div>
     <div>
      <el-button type="primary" @click="login">管理员</el-button>
     </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const pathList = ref()
// 获取面包屑数据
const getCurrentPath = () => {
  pathList.value = route.matched.filter((item) => item.meta && item.meta.title)
}

const login = () => {
  window.open('http://localhost:8080/#/login')
}

onMounted(() => {
  getCurrentPath()
})

watch(
  route,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  (to: { matched: any[] }) => {
    pathList.value = to.matched.filter((item) => item.meta && item.meta.title)
  },
  { immediate: true }
)
</script>

<style scoped>
.menu-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
</style>
